<template>
  <el-card style="max-width: 90vw; max-height: 70px">
    <el-form ref="queryFormRef" :inline="true">
      <el-form-item prop="keywords" label="关键字">
        <el-input placeholder="角色名称" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary"><i-ep-search />搜索</el-button>
        <el-button><i-ep-refresh />重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card style="max-width: 90vw">
    <template #header>
      <div class="card-header">
        <el-button type="success" @click="openAlert">新增</el-button>
        <el-button type="danger">删除</el-button>
      </div>
    </template>
    <!-- 表格 -->
    <el-table
      :data="menuList"
      style="width: 100%"
      row-key="id"
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column label="类型" width="100">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #reference v-if="scope.row.type == 'CATALOG'">
              <el-tag type="warning">{{ "目录" }}</el-tag>
            </template>
            <template #reference v-else-if="scope.row.type == 'MENU'">
              <el-tag type="success">{{ "菜单" }}</el-tag>
            </template>
            <template #reference v-else-if="scope.row.type == 'BUTTON'">
              <el-tag type="danger">{{ "按钮" }}</el-tag>
            </template>
            <template #reference v-else-if="scope.row.type == 'EXTLINK'">
              <el-tag type="info">{{ "外链" }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路由路径" width="120" />
      <el-table-column prop="component" label="组件路径" width="240" />
      <el-table-column prop="address" label="权限标识" width="180" />
      <el-table-column label="状态" width="110">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #reference v-if="scope.row.visible">
              <el-tag type="success">{{ "显示" }}</el-tag>
            </template>
            <template #reference v-else>
              <el-tag type="info">{{ "隐藏" }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="100" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button link size="small" type="primary"> 新增 </el-button>
          <el-button
            link
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            link
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { getList, getSelectList } from "@/api/menu/index";

onMounted(() => {
  getListData();
});

const menuList = ref([]);
const selectList = ref([]);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = ref({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

// 获取数据
const getListData = async () => {
  let res = await getList();
  menuList.value = Object.values(res);
  console.log(Object.values(res));
};

// 显示弹窗
const openAlert = () => {
  dialogFormVisible.value = true;
};

const handleEdit = (index: number, row: any) => {
  console.log(index, row);
  getSelectListData();
};
const handleDelete = (row: any) => {
  console.log(row);
};

// 获取菜单下拉列表
const getSelectListData = async () => {
  let res = await getSelectList();
  selectList.value = Object.values(res);
};
</script>
<style scoped lang="less">
</style>